<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Pear-Admin-Layui-表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="pear-container">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md2 layui-col-sm2">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <input type="text" name="title" placeholder="菜单名称" class="layui-input">
                    </div>
                    <div class="layui-card-body">
                        <div id="ID-tree-demo-showLine"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md10 layui-col-sm10">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-row layui-col-space16">
                            <div class="layui-col-md4">
                                <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-username"></i>
                                </div>
                                <input type="text" name="A" value="" placeholder="Field A" class="layui-input" lay-affix="clear">
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-date"></i>
                                </div>
                                <input type="text" name="C" readonly placeholder="Field C" class="layui-input demo-table-search-date">
                                </div>
                            </div>  
                            <div class="layui-btn-container layui-col-md4">
                                <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                            </div>
                        </form>
                        <table class="layui-hide" id="ID-table-demo-search"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(function(){
            var tree = layui.tree;
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;

            // 模拟数据
            var data = [{title:'江西',id:1,children:[{title:'南昌',id:1000,children:[{title:'青山湖区',id:10001},{title:'高新区',id:10002}]},{title:'九江',id:1001},{title:'赣州',id:1002}]},{title:'广西',id:2,children:[{title:'南宁',id:2000},{title:'桂林',id:2001}]},{title:'陕西',id:3,children:[{title:'西安',id:3000},{title:'延安',id:3001}]},{title:'山西',id:3,children:[{title:'太原',id:4000},{title:'长治',id:4001}]}];
            // 渲染
            tree.render({
                elem: '#ID-tree-demo-showLine',
                data: data,
                showLine: false,
                accordion: true
            });

            //表格
            // 创建表格实例
            table.render({
                elem: '#ID-table-demo-search',
                url: '../../admin/data/table.json', // 此处为静态模拟数据，实际使用时需换成真实接口
                cols: [[
                {type: 'radio', title: '😊', fixed: true}, // 单选框
                {field:'id', title: 'ID', width:80, sort: true, fixed: true},
                {field:'username', title: '用户名', width:80},
                {field:'sex', title: '性别', width:80, sort: true},
                {field:'city', title: '城市', width:80},
                {field:'sign', title: '签名'},
                {field:'experience', title: '积分', sort: true, width:80}
                ]],
                page: true,
                height: 500
            });
            // 日期
            laydate.render({
                elem: '.demo-table-search-date'
            });
            // 搜索提交
            form.on('submit(demo-table-search)', function(data){
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                table.reload('ID-table-demo-search', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
                });
                layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
                return false; // 阻止默认 form 跳转
            });
        });
    </script>
</body>
</html>